import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
import { UploadFile } from 'ng-zorro-antd';

@Component({
  selector: 'pic-viewer',
  templateUrl: './pic-viewer.component.html',
  styleUrls: ['./pic-viewer.component.scss'],
})
export class PicViewerComponent implements OnInit, OnChanges {


  @Input() picList: any[] = [];
  @Input() show: boolean = false;
  @Input() picIdx: number = 0;
  @Input() currFile: UploadFile;

  @Output() onClose: EventEmitter<any> = new EventEmitter();

  picNum: number = 0;
  showPrev: boolean = false;
  showNext: boolean = false;


  constructor() {
  }

  ngOnInit() {
    let _self = this;
    this.picIdx = this.picList.findIndex((p) => p.imgKey == _self.currFile.imgKey);
    this.picIdx = this.picIdx < 0 ? 0 : this.picIdx;
    this.checkList();
    document.addEventListener('keydown', function(e) {
      if (e.keyCode === 37) {
        if (_self.showPrev) {
          _self.doPrev();
        }
      } else if (e.keyCode === 39) {
        if (_self.showNext) {
          _self.doNext();
        }
      }
    }, false);
  }

  ngOnChanges(): void {
    this.checkList();
  }

  //上一页
  doPrev() {
    --this.picIdx;
    this.checkList();
  }

  //下一页
  doNext() {
    ++this.picIdx;
    this.checkList();
  }

  checkList() {
    this.picNum = this.picList ? this.picList.length : 0;
    this.picIdx <= 0 && (this.showPrev = false);
    this.picIdx >= this.picNum - 1 && (this.showNext = false);
    this.picIdx > 0 && (this.showPrev = true);
    this.picIdx < this.picNum - 1 && (this.showNext = true);
  }

  close() {
    this.show = false;
    this.onClose.emit(this.show);
  }

}
